<template>
<div>
    <headTop></headTop>
    <div class="main-wrap d-flex justify-content-between">
        <div class="left-admin-nav pull-left">
            <Nav></Nav>

            <div class="top-line"></div>
            <div class="title-common">故障类别统计</div>
            <div class="driver-search">
                <div class="input-group">
                    <i class="icon-times" v-if="isShowX" v-on:click="clearInput()"></i>
                    <input type="text" class="form-control" placeholder="设备号查询" aria-label="driverNubmer" aria-describedby="basic-addon1"   v-model.trim="inputDeviceId" v-on:input="showClearInput()">
                    <div class="input-group-prepend" v-on:click="getDiviceInfo2(inputDeviceId)">
                      <span class="input-group-text" id="basic-addon1">
                        <i class="icon-search"></i>
                      </span>
                    </div>
                </div>
            </div>
            <div class="driver-search-list item-container scroll-bar drivers-list" id="driverSearchList">
                <table class="table table-striped boxed">
                    <thead>
                        <tr class="head-tile">
                            <th scope="col">设备号</th>
                            <!-- <th scope="col">姓名</th> -->
                            <th scope="col">ICCID</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody id="gzList"><!--v-on:click="locationDevice(drive.lng,drive.lat,drive.drID)" -->
                        <tr class="tb-cont" v-for="drive in drivceList" :key="drive.drID" >
                            <td scope="row" title="">
                                 {{ drive.deviceId }}
                            </td>
                            <!-- <td>{{ drive.status }}</td> -->
                            <td>{{ drive.iccid }}</td>
                            <td class="tb-operation">
                                <a href="#" @click='addMonitor(drive)' class="icon-eye-plus" title="监控该设备"  v-bind:class="{onWatch:drive.isShow}"></a>
                                <!-- <a href="javascript:void(0);" @click="toTracker(drive.drID)" class="icon-map" title="该设备轨迹"></a> -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页开始 -->
            <v-pagination :total="total" :current-page="current" @pagechange="pagechange"></v-pagination>

            <ul class="v-pagination item-container" id="dariverListPage" hidden>
                <li class="disabled">
                    <a href="javascript:;">«</a>
                </li>
                <li class="disabled">
                    <a href="javascript:;">首页</a>
                </li>

                <li class="active"  >
                    <a href="javascript:;">1</a>
                </li>

    
                <li class="disabled">
                    <a href="javascript:;">尾页</a>
                </li>
                <li class="disabled">
                    <a href="javascript:;">»</a>
                </li>
                <div class="d-flex subPage">
                    <span>第</span>
                    <input type="number" maxlength="5" class="inputNmber" placeholder="1">
                    <span>页</span>
                    <span class="page-total">共50页</span>
                </div>
            </ul>
        </div>

        <div class="center-scroll-sys-msg">
            <div class="msg-black">{{ this.global.copyrightText }}</div>
        </div>

        <div class="right-driver-info pull-right">
            <div class="title-common" id="ListTil">设备监控状态</div>
            <div class="drivers-list item-container scroll-bar" id="driversList">
                <div class="fault-class-statistics">
                    <div class="top-line"></div>
                    <div class="d-flex row">
                        <a class="col-4 statistics-item" href="#" v-for="item in newList" v-bind:key="item.drID">
                            <div class="fault-icon">
                                <img src="static/img/driver_icon.png" class="inner-icon">
                                <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-a">
                            </div>
                            <p class="name">
                                <span class="drives-name">{{ item }}</span>
                                <img src="static/img/icon_checked.png" width="13px" height="12px">
                            </p>
                            <span class="qx-btn icon-times" @click="removeMonitor(item)"></span>
                        </a>
                    </div>
                    <div class="bottom-line"></div>
                </div>
            </div>
            <div class="title-common">安全围栏违规车辆分布</div>
            <DeviceViolationStatistic></DeviceViolationStatistic>
        </div>
    </div>



    <baiduMapDriverLive ref="baiduMapDriverLive" ></baiduMapDriverLive>
    <!-- 装饰条 -->
    <div class="top-border-decorate"><img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%"></div>
    <div class="bottom-border-decorate"><img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%"></div>
    <!-- 弹出框 -->
    <div class="hide-black" id="hide-iframe" v-if="isOpenHideWindow">
        <div class="hide-iframe full-screen" id="hide-iframe">
            <h3 class="h-title">河南信恒北斗有限公司
                <!-- <i class="console-window icon-enlarge" v-bind:class="{'icon-shrink':isShrink}" id="windEnlarge" @click="windEnlarge()" title="全屏/窗口"></i> -->
                <i class="off-window" @click="closeHideWindow()" title="关闭窗口">返回</i>
            </h3>
            <div class="eage-eyes"><iframe class="eage-eyes-iframe" src="{{yinyanUrl}}"></iframe></div>
        </div>
    </div>
    <div class="eye-eage-btn" @click="toTracker()">设备轨迹查看</div>

</div>
</template>

<script>
import Nav from "../../components/Nav.vue";
import headTop from "../../components/headerTop.vue";
import baiduMapDriverLive from "../../components/baiduMapDriverLive.vue";
import ScrollSysMsg from "../../components/ScrollSysMsg.vue";
import DeviceViolationStatistic from "../../components/charts/DeviceViolationStatistic.vue";
import pagination from "../../components/pagination.vue";
import axios from "axios";
import BMap from "BMap";

export default {
  name: "DriverLive",
  data() {
    return {
      screenHeight: document.body.clientHeight,
      total: 150, // 记录总条数
      display: 20, // 每页显示条数
      current: 1, // 当前的页数
      newList: [],
      drivceList: [],
      maskOfgetMarket: "", //获取点的任务
      trajectoryList: [], //轨迹集合
      pois: [], //轨迹点的集合
      startAndEndMarket: [], //起点和终点
      myPolyline: "", //折线对象
      rowNumList: [], //每排放三个监控对象
      appKey: "",
      inputDeviceId: "", //输入的设备ID
      //isShow:false,
      isOpenHideWindow: false,
      isShrink: false,
      isFullscreen: false,
      isShowX:false,
      yinyanUrl:"http://47.99.119.140:8081/manager.html?service_id=208840&ak=zzO5Vz5PQGzSpZ0gh1qc46u0z0UpTphR"
    };
  },
  created: function() {},
  watch: {
    screenHeight(winHeight) {
      setTimeout(() => {
        this.setDriversListHeight();
      }, 500);
    }
  },
  components: {
    Nav,
    headTop,
    baiduMapDriverLive,
    ScrollSysMsg,
    DeviceViolationStatistic,
    "v-pagination": pagination
  },
  methods: {
       clearInput(){
      this.inputDeviceId = "";
       this.isShowX = false;
       this.getDiviceInfo2();
    },
    showClearInput(){
      this.isShowX = true;
    },
    setDriversListHeight() {
      var winHeight = $(window).innerHeight();
      this.screenHeight = winHeight;
      var ListTilHeight = $("#ListTil").innerHeight();
      $("#driversList").height(winHeight - ListTilHeight - 379);
      $(".right-driver-info").height(winHeight - 95);
      $(".left-admin-nav").height(winHeight - 95);
      var driverNavHeight = $("#driverNav").innerHeight();
      var dariverListPageHeight = $("#dariverListPage").innerHeight();
      var driverSearchHeight = $(".driver-search").innerHeight();
      var leftWidth = $(".left-admin-nav").width();
      var rightWidth = $(".right-driver-info").width();
      $(".center-scroll-sys-msg").css({
        paddingLeft: leftWidth + 20,
        paddingRight: rightWidth + 20
      });
      $("#driverSearchList").height(
        winHeight -
          driverNavHeight -
          dariverListPageHeight -
          driverSearchHeight -
          174
      );
    },
    // //分组排序设备监控状态列表
    // drivceWatchList() {
    //   var drivceList = this.drivceList; //获取设备列表
    //   var newList = [];
    //   for (var i = 0; i < drivceList.length; i += 3) {
    //     //分割数组
    //     newList.push(drivceList.slice(i, i + 3));
    //   }
    //   this.newList = newList;
    // },
    //分页工具
    pagechange(currentPage) {
      this.current = currentPage;
      this.getDiviceInfo("");
      // ajax请求, 向后台发送 currentPage, 来获取对应的数据
    },
    //获取点信息
    getMarket(val) {
      this.drivceList = val;
    },

    //获取设备信息2
    getDiviceInfo: function(deviceId) {
      var _this = this;
      $.ajax({
        url: _this.global.deviceQuery, //请求的url地址
        contentType: "application/json;charset=UTF-8",
        dataType: "json", //返回格式为json
        data: {
          appKey: _this.appKey,
          pageNumber: this.current - 1,
          pageSize: this.display,
          deviceId: deviceId
        }, //参数值
        type: "GET", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.drivceList = req.data.records;
            for (var i = 0; i < _this.drivceList.length; i++) {
              _this.drivceList[i].isShow = true;
            }
            _this.total = req.data.pageInfo.total;
            var pageListLenth = Math.ceil(
              req.data.pageInfo.total / req.data.pageInfo.size
            );

            _this.pagegroup = pageListLenth;
          }
        },
        complete: function() {
          _this.querryMonitor();
        },
        error: function() {
          //请求出错处理
        }
      });
    },

      //获取设备信息2
    getDiviceInfo2: function(deviceId) {
      var _this = this;
      $.ajax({
        url: _this.global.deviceQuery, //请求的url地址
        contentType: "application/json;charset=UTF-8",
        dataType: "json", //返回格式为json
        data: {
          appKey: _this.appKey,
          pageNumber: this.current - 1,
          pageSize: this.display,
          deviceId: deviceId
        }, //参数值
        type: "GET", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.drivceList = req.data.records;
            for (var i = 0; i < _this.drivceList.length; i++) {
              _this.drivceList[i].isShow = true;
            }
            _this.total = req.data.pageInfo.total;
            var pageListLenth = Math.ceil(
              req.data.pageInfo.total / req.data.pageInfo.size
            );

            _this.pagegroup = pageListLenth;
          }
        },
        complete: function() {
        //  _this.querryMonitor();
        },
        error: function() {
          //请求出错处理
        }
      });
    },

    //监控设备2
    querryMonitor: function() {
      var _this = this;
      $.ajax({
        url: _this.global.deviceMonitorList, //请求的url地址
        //  contentType: "application/json;charset=UTF-8",
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey }, //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.newList = req.data.data;
            if (
              _this.isEmptyObject(req.data.data) ||
              _this.isEmptyObject(_this.drivceList)
            ) {
              console.log("数组为空");
            } else {
              for (var x = 0; x < req.data.data.length; x++) {
                for (var y = 0; y < _this.drivceList.length; y++) {
                  if (req.data.data[x] == _this.drivceList[y].deviceId) {
                    _this.drivceList[y].isShow = false;
                  }
                }
              }
            }
          }
        },
        complete: function() {
          _this.$refs.baiduMapDriverLive.routeChart(_this.newList);//改成线上接口时,改成routeChart
        },
        error: function() {
          //请求出错处理
        }
      });
    },

    //监控设备2
    addMonitor: function(deviceInfo) {
      var _this = this;

      for (var i = 0; i < _this.newList.length; i++) {
        if (_this.newList[i] == deviceInfo.deviceId) {
          this.$showToast("该设备已在监视中");
          return;
        }
      }

      $.ajax({
        url: _this.global.addDeviceMonitor, //请求的url地址
        //  contentType: "application/json;charset=UTF-8",
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey, cellId: deviceInfo.deviceId }, //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.$showToast("添加监控设备成功");
          }
        },
        complete: function() {
          _this.querryMonitor();
        },
        error: function() {
          //请求出错处理
          _this.$showToast("添加监控设备失败");
        }
      });
    },

    //监控设备2
    removeMonitor: function(deviceId) {
      var _this = this;
      $.ajax({
        url: _this.global.cancelDeviceMonitor, //请求的url地址
        //  contentType: "application/json",
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey, cellId: deviceId }, //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          if (req.code == "200") {
            _this.$showToast("移除监控设备成功");
            for (var y = 0; y < _this.drivceList.length; y++) {
              if (deviceId == _this.drivceList[y].deviceId) {
                _this.drivceList[y].isShow = true;
              }
            }
          }
        },
        complete: function() {
          _this.querryMonitor();
        },
        error: function() {
          _this.$showToast("移除监控设备失败");
        }
      });
    },

    //点击设备 点位到设备位置
    locationDevice: function(lng, lat, id) {
      var point = new BMap.Point(lng, lat);
      window.DriverLiveBaiduMap.centerAndZoom(point, 13); //定位到点  并设置地图大小
      var overLaysList = window.DriverLiveBaiduMap.getOverlays();
      for (var i = 0; i < overLaysList.length; i++) {
        if (overLaysList[i].toString() == "[object Marker]") {
          if (
            overLaysList[i].getPosition().lng == lng &&
            overLaysList[i].getPosition().lat == lat
          ) {
            overLaysList[i].setAnimation(BMAP_ANIMATION_BOUNCE);
          }
        }
      }

      // this.getTrajectory(id);
    },

    //点击监控按钮 监控设备
    monitorDevice: function(deviceInfo) {
      if (this.newList.length != 0) {
        for (var i = 0; i < this.newList.length; i++) {
          if (deviceInfo.drID == this.newList[i].drID) {
            // this.newList.splice(i, 1);
            return;
          }
        }
        this.newList.push(deviceInfo);
      } else {
        this.newList.push(deviceInfo);
      }
    },
    closeMonitorDevice: function(drID) {
      for (var i = 0; i < this.newList.length; i++) {
        if (drID == this.newList[i].drID) {
          this.newList.splice(i, 1);
          return;
        }
      }
    },
    //关闭监控设备

    //跳转到轨迹页面
    toTracker: function(id) {
      this.$showToast("loading...");
      this.isOpenHideWindow = true;
    },
    //关闭隐藏窗口
    closeHideWindow: function() {
      this.isOpenHideWindow = false;
    },
    //全屏窗口
    windEnlarge: function() {
      this.isShrink = !this.isShrink;
      this.isFullscreen = !this.isFullscreen;
    },
    //移出监视列表
    removeWatchItem: function() {
      $(".fault-class-statistics .statistics-item").mouseenter(function() {
        alert(0);
        // $(this).find(".qx-btn").show(0);
      });
    },
    isEmptyObject: function(e) {
      var t;
      for (t in e) return !1;
      return !0;
    }
  },
  mounted: function() {
    //  this.global.userInfo.appKey=JSON.parse(localStorage.getItem("userInfo")).appKey;

    this.appKey = JSON.parse(localStorage.getItem("userInfo")).appKey;
    //挂载页面
    //  this.drivceWatchList();
    document.title = "设备信息-北斗位置服务管理平台";
    const that = this;
    this.setDriversListHeight();
    this.removeWatchItem();
    this.querryMonitor();
    //监听窗口变化自适应
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenHeight = window.screenHeight;
      })();
    };

    this.getDiviceInfo("");
    this.maskOfgetMarket = window.setInterval(() => {
      window.setTimeout(this.getDiviceInfo(""), 0);
    }, 3600000);

    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.maskOfgetMarket);
    });

    this.$refs.baiduMapDriverLive.routeChart(this.drivceList);
    //this.newList=this.drivceList;
  },
  created: function() {},
  destroyed: function() {
    //页面销毁
    window.clearInterval(this.maskOfgetMarket);
  }
};
</script>

<style scoped>
</style>